<template>
    <div  style=" overflow-y:auto; overflow-x:auto; width:100%; height:100%;">
    >
        <div class="top"></div>
        <div class="us-title">
            <br/>
            四川工商学院
            <br/>
            <br/>
            <p class="us-p">设备报修</p>
        </div>
        <div class="us-text">请填写完成下列信息：</div>
        <div class="us-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="门牌号" prop="doorNumber">
                    <el-select  v-model="ruleForm.doorNumber.uuid"   style="width: 98%"  @change="selectChange(ruleForm.doorNumber.uuid)" placeholder="请选择门牌号" >
                        <el-option v-for="item in ruleForm.doorNumber" :key="item.uuid" :label="item.lab_name+'('+item.door_number+')'" :value="item.door_number"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="equipmentName">
                    <el-select  v-model="ruleForm.equipmentName.equipment_name" placeholder="请选择实验室门牌号"  style="width: 98%">
                        <el-option v-for="item in ruleForm.equipmentName" :key="item.equipment_name" :label="item.equipment_name" :value="item.equipment_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="故障现象" prop="faultPhenomenon">
                    <el-input v-model="ruleForm.faultPhenomenon"></el-input>
                </el-form-item>
                <el-form-item label="人员姓名" prop="studentName">
                    <el-input v-model="ruleForm.studentName"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">点击报修</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm:{
                    doorNumber:[{
                        door_number:'',
                        lab_name:'',
                        uuid:''
                    }],
                    equipmentName: [{
                        equipment_name:''
                    }],
                    faultPhenomenon: '',
                    studentName: '',
                    phoneNumber: '',
                    repairStatus: ''
                },
                rules: {

                    faultPhenomenon: [
                        { required: true, message: '请输入故障现象', trigger: 'blur' },
                    ],
                }
            }
        },
        created(){
            this.getData()
        },
        methods:{
            selectChange(uuid){
                this.$axios.get('text/repairequipment/queryequipmentname?doorNumber='+uuid).then((res) => {
                    this.ruleForm.equipmentName= res.data.data;
                })
            },
            getData(){
                this.$axios.get('text/repairequipment/querydoornumber').then((res) => {
                    this.ruleForm.doorNumber= res.data.data;
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/repairequipment/insert?' +
                            'doorNumber=' + this.ruleForm.doorNumber.uuid +
                            "&equipmentId=" + this.ruleForm.equipmentId+
                            "&equipmentName=" + this.ruleForm.equipmentName.equipment_name+
                            "&faultPhenomenon=" + this.ruleForm.faultPhenomenon+
                            "&studentName=" + this.ruleForm.studentName+
                            "&phoneNumber=" + this.ruleForm.phoneNumber+
                            "&repairStatus=" + '未修'
                        ).then((res) => {
                            console.log(res.data.code)
                            if(res.data.code==200)
                            {
                                this.$message({
                                    message: '报修设备成功！！',
                                    type: 'success'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    };
</script>

<style scoped>
    @media (min-width:400px){

        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size:40px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");

        }
        .us-p{
            color: black;
            font-family: 华文行楷;
            font-size: 30px;
            font-weight: initial;
        }
        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
        .us-main button{
            width: 150px;
            height: 50px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 10px;
            font-style: inherit;
            color: white;
            margin: 5px 40px 10px 40px;

        }
        .us-text{
            margin-top: 30px;
            margin-left: 20px;
            font-size: 35px;
            height: 50px;
            margin-bottom: auto;
            font-family:隶书;

        }
        .us-b{
            margin-top: 160px;
            text-align: center;
            font-size: 8px;
        }

    }

    @media (max-width: 768px){
        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");

        }

        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;

        }
        .us-main button{
            width: 150px;
            height: 50px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 20px;
            font-style: inherit;
            color: white;
            margin: 2px 40px 10px 40px;
        }
        .us-text{
            margin-top: 20px;
            margin-left: 40px;
            font-size: 35px;
            font-family:隶书;
            font-weight: lighter;

        }
        .us-b{
            margin-top: 80px;
            text-align: center;
            font-size: 15px;
        }
    }

</style>
